<template>
  <div>

    <el-button type="success">Success</el-button>

    <el-text class="mx-1" type="danger">Danger</el-text>

    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }} + {{ item.age }} + {{ item.price }}
      </li>
    </ul>
    <div>渲染接口数据</div>
    <ul>
      <li v-for="item in newList" :key="item.id">
        {{ item.name }} + {{ item.age }} + {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

import axios from 'axios';

// 定义一个数组
const list = ref([{
  id: 1,
  name: '旺财',
  age: 18,
  price: 999
}, {
  id: 2,
  name: '招财',
  age: 8,
  price: 599
}, {
  id: 3,
  name: '旺旺',
  age: 1,
  price: 99
}, {
  id: 4,
  name: '小黑',
  age: 8,
  price: 9
}])

// 定义一个空数组，存放接口请求的数据
const newList = ref([])

const getData = () =>{
  axios.get('/api/list').then(res =>{
    newList.value = res.data
  })
}

getData()


</script>
